<template>
    <div class=" header main">
         <span id="header">
            <span>
                <span>{{mname}}</span>
                <el-button type="primary" plain v-if="this.principal === null" @click="dd1()" style="height: 37px;width: 70px">登录</el-button>
                <el-button type="info" plain v-else @click="output()" style="height: 37px;width: 70px">注销</el-button>
            </span>
        </span>
        <!-- 导航栏-->
        <div style="width: 80%">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                     active-text-color="red"
                     style="font-weight:bold">
                <el-menu-item index="1" @click="$router.push('/shouye')">首页</el-menu-item>
                <el-menu-item index="2" @click="$router.push('/product')">商品展示</el-menu-item>
                <el-menu-item index="3" @click="$router.push('/activity')">专享活动</el-menu-item>
                <el-menu-item index="4" @click="$router.push('/shoppingCart')">购物车</el-menu-item>
                <el-menu-item index="5" @click="$router.push('/personalCenter')">个人中心</el-menu-item>
            </el-menu>
        </div>

        <!-- 顶部-->
        <div class="brandsDiv">
            <ul class="brands">
                <li clstag="channel|keycount|1839|brand_6_1">
                    <a href="//aokang.jd.com/" target="_blank">
                        <img width="100" height="50" src="//img12.360buyimg.com/cms/jfs/t5932/277/3198966620/3185/b342ac35/594ce99eNfe23133f.png!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_2">
                    <a href="//mall.jd.com/index-608668.html" target="_blank">
                        <img width="100" height="50" src="//img12.360buyimg.com/cms/jfs/t5287/185/1175725922/5743/9e724cfe/590c4568Na30ce06c.jpg!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_4">
                    <a href="https://mall.jd.com/index-20550.html" target="_blank">
                        <img width="100" height="50" src="//img12.360buyimg.com/cms/jfs/t24505/176/41565957/3539/bd10e5d3/5b2374ddN282c0469.jpg!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_3"><a href="//mall.jd.com/index-53379.html" target="_blank">
                    <img width="100" height="50" src="//img11.360buyimg.com/cms/jfs/t4546/238/4271202928/3497/7bb3b13b/590c45b3N81337e85.jpg!q95.webp"><em></em>
                </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_5"><a href="//qipilang.jd.com/" target="_blank">
                    <img width="100" height="50" src="//img11.360buyimg.com/cms/jfs/t5800/361/4425612374/2780/4f9a4d66/594de176Nab056268.png!q95.webp"><em></em>
                </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_6">
                    <a href="https://mall.jd.com/index-35324.html?cpdad=1DLSUE" target="_blank">
                        <img width="100" height="50" src="//img10.360buyimg.com/cms/jfs/t9898/257/294758224/3973/23d11cd0/59cb55f0Nb8e1704d.png!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_7"><a href="https://mall.jd.com/index-184352.html" target="_blank">
                    <img width="100" height="50" src="//img10.360buyimg.com/cms/jfs/t8755/133/778687037/3117/aca98a6d/59ae5f6dNbce03bb6.jpg!q95.webp"><em></em>
                </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_0">
                    <a href="//mall.jd.com/index-115708.html" target="_blank">
                        <img width="100" height="50" src="//img10.360buyimg.com/cms/jfs/t4288/308/3058772343/4004/4507d308/58d9dd35N3f993761.jpg!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_8">
                    <a href="https://mall.jd.com/index-68668.html" target="_blank">
                        <img width="100" height="50" src="//img11.360buyimg.com/cms/jfs/t4180/289/3052404473/7699/f43f16da/58d9dc68N474601cd.jpg!q95.webp"><em></em>
                    </a>
                </li>
            </ul>
        </div>

        <center>
            <div style="width: 1100px;height: 370px;border: 1px solid #909399;border-radius: 30px;margin: 25px auto">
                <!--                商品图片-->
                <div style="width: 200px;margin-top: 40px;height: 300px;float: left;margin: 50px 15px;">
                    <img style="width: 200px;height: 200px;border-radius: 20px" :src="getUrl(order.tbPrdInfoList.picPath)">
                </div>
                <!-- 商品信息-->
                <div style="width: 600px;height: 350px;float: left;margin: 0px 25px">
                    <td style="vertical-align:top;width: 500px;">
                        <div style="height: 300px;margin:10px auto;text-align:left;">
                            <br/>
                            <h3 @click="$router.replace({name:'xq',params:{tid:order.tid}})" style="color: #52c9ff;width: 700px">{{order.tbPrdInfoList.labelName}}</h3>
                            <!--                            <h3 @click="$router.push({path:'/xq',query:{tid:order.tid}})" style="color: #52c9ff;width: 700px">{{order.tbPrdInfoList.labelName}}</h3>-->
                            <p style="font-size: 15px">-----&nbsp;&nbsp;{{order.tbPrdInfoList.shortDesc}}&nbsp;&nbsp;-----</p>
                            商品价格<span class="price" style="color: #99a9bf">￥ <strong>{{order.tbPrdInfoList.price}}</strong></span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            购买数量<span class="price" style="color: #99a9bf">&nbsp;&nbsp;&nbsp;<strong>{{order.payStatus}}</strong></span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            配送费<span class="price" style="color: #99a9bf">￥ <strong>{{order.postFee}}</strong></span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            合计总价<span class="price" style="color: red">￥ <strong>{{order.totalPrice}}</strong></span>
                            <br/><br/>
                            <span class="price"><span style="font-size: 15px;color: #99a9bf">配送方式：</span>
                                <el-select v-model="order.postWay" @change="yyy(order.postWay)" :disabled="ttt" style="width: 105px;color: black">
                                    <el-option label="顺丰" value="顺丰"></el-option>
                                    <el-option label="中通" value="中通"></el-option>
                                    <el-option label="圆通" value="圆通"></el-option>
                                    <el-option label="邮政" value="邮政"></el-option>
                                    <el-option label="京东专送" value="京东专送"></el-option>
                                </el-select>
                            </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="price"><span style="font-size: 15px;color: #99a9bf">付款方式：</span>
                                 <el-select v-model="order.payType" :disabled="ttt" style="width: 105px;color: #409EFF">
                                    <el-option label="支付宝" value="支付宝"></el-option>
                                    <el-option label="微信" value="微信"></el-option>
                                    <el-option label="京东白条" value="京东白条"></el-option>
                                </el-select>
                            </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <!--                            <span class="price"><span style="font-size: 15px;color: #99a9bf">数量：</span>1</span>-->
                            <br/><br/><br/>
                            <span style="font-size: 10px">订单号：{{order.oid}}</span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="font-size: 10px">创建时间：{{order.createDate}}</span>

                            <p style="font-size: 15px">
                                <span style="color: #409EFF">收货人： </span>{{order.shippingName}}
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span style="color: #409EFF">联系方式： </span>{{order.shippingPhone}}<br><br>
                                <span style="color: #409EFF">收货地址： </span>{{order.shippingAddress}}
                            </p>
                            <br/><br/>
                        </div>
                    </td>
                </div>

                <!-- 下单按钮-->
                <div>
                    <div  v-if="this.order.status === 0" style="width: 50px;height: 230px;float: left;margin: 25px 0px">
                        <br/><br/><br/>
                        <el-button type="danger" round @click="pay()" plain style="width: 150px;height:50px;margin: 50px 0px 0px -50px">立即付款</el-button>
                        <span class="el-icon-edit" style="position: absolute;margin: 0px 0px 0px -320px;top: 423px" @click="upd(oid)"></span>
                        <div style="position: absolute;margin: -130px 0px 0px -50px;">
                            <v-text style="color: #409EFF; ">订单倒计时:</v-text>
                            <v-text style="color: red;font-size: 20px">{{this.m}}分{{this.s}}秒</v-text>
                        </div>
                    </div>
                    <div  v-if="this.order.status === 1" style="float: left;margin: 25px 0px">
                        <h2 style="line-height: 200px;font-family: 楷体;color: darkorange">正在配送中</h2>
                        <el-button type="primary" round @click="shouhuo()" plain style="width: 150px;height:50px;">确认收货</el-button>
                    </div>
                    <div v-if="this.order.status === 2" style="float: left;margin: 25px 0px">
                        <h2 style="line-height: 200px;font-family: 楷体;color: deepskyblue">订单已完成</h2>
                    </div>
                    <div  v-if="this.order.status === 4" style="float: left;margin: 25px 0px">
                        <h2 style="line-height: 200px;font-family: 楷体;color: red">订单已失效</h2>
                    </div>
                </div>
            </div>
            <!--            遮罩层-->
            <el-dialog title="订单信息" :visible.sync="dialogFormVisible">
                <el-form :model="order">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="收件人：">
                            <el-select  v-model="order.shippingName" placeholder="请选择收货地址" style="width: 500px">
                                <el-option v-for="(i,index) in addressList" :label="i.realName" :value="i.realName" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="手机号：">
                            <el-select  v-model="order.shippingPhone" placeholder="请选择收货地址" style="width: 500px">
                                <el-option v-for="(i,index) in addressList" :label="i.realPhone" :value="i.realPhone" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收货地址：">
                            <el-select  v-model="order.shippingAddress" placeholder="请选择收货地址" style="width: 500px">
                                <el-option v-for="(i,index) in addressList" :label="i.realAddress" :value="i.realAddress" :key="index"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-form>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="update(order)">确 定</el-button>
                </div>
            </el-dialog>
        </center>

        <!-- 底部-->
        <div>
            <center>
                <table width="80%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <img src="../assets/img/1004.jpg" width="100%">
                            <img src="../assets/img/2006.jpg" width="100%">
                        </td>
                    </tr>
                </table>
            </center>

            <div class="img">
                <img src="../assets/img/d0.png" style="width: 100%;">
            </div>
            <div class = "under">
                <a href="#" target="_blank" rel="nofollow">免费声明 </a>
                <a href="#" target="_blank" rel="nofollow">关于我们 </a>
                <a href="#" target="_blank" rel="nofollow">支付方式 </a>
                <a href="#" target="_blank" rel="nofollow">联系我们 </a>
                <a href="#" target="_blank" rel="nofollow">营业执照 </a>
                <a href="#" target="_blank" rel="nofollow">服务条款 </a>
            </div>
            <br>
            <div class="img">
                <img src="../assets/img/d1.png" style="width: 100%;">
            </div>
            <div class="footer-edit">
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);">Copyright © 1999 河南AAA有限公司 地址：郑州市新郑市AAA软件教育</span>
                </p>
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);"> 本网站部分图片来源于网络,如有侵权请联系我们,我们会尽快处理&nbsp;</span>
                </p>
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);">&nbsp;</span>
                    <a href="http://www.baidu.com" target="_blank" style="color: rgb(165, 165, 165);">郑州昆旅国际旅行社太康路营业部</a></p>
                <p style="line-height: 1.0em;">
                <span style="color: rgb(165, 165, 165);">服务热线0371-888888&nbsp;
                    <span style="color: rgb(165, 165, 165);">微信：18838965238&nbsp; 15981917089&nbsp;</span>
                    在线QQ：1479430525&nbsp; 1479430525&nbsp; &nbsp;</span></p>
                <p style="line-height: 1.0em;">
                    <a href="https://www.baidu.com" target="_blank"></a>
                    <span style="color: rgb(165,165,165);">
                        <span style="color: rgb(153, 153, 153); font-family: PingFang SC;,Microsoft Yahei UI, Microsoft Yahei&quot;,Hiragino Sans GB;, Helvetica, STHeiti, sans-serif; background-color: rgb(249, 249, 249);">
                            旅行社业务经营许可证号 L-HEN-CJ00011
                        </span>
                    </span>
                    豫ICP备19990315号
                    <a/>
                </p>
            </div>

        </div>

    </div>
</template>

<script>
    export default {
        name: 'OrderDetails',
        inject: ['reload'], // 注入reload方法
        data () {
            return {
                d: 0,
                h: 0,
                m: 0,
                s: 0,
                dialogFormVisible: false,
                principal: sessionStorage.getItem('token'),
                accountId: sessionStorage.getItem('username'),
                mname: '已登录',
                order: null,
                activeIndex: '5',
                addressList: [],
                oid: '',
                ttt: false,
                ExitFlag:  true
            }
        },
        created () {
            if (this.principal === null) {
                this.mname = '未登录'
                this.$message({
                    type: 'info',
                    message: '请先登录!'
                })
                this.$router.push('/login')
            } else {
                this.oid = this.$route.query.oid
                // this.$route.query.oid
                this.$http.post('order/order/findByOid', {oid: this.$route.query.oid}).then(data => {
                    this.order = data
                    this.countTime(data.createBy)
                    if (this.order.status === 0) {
                        this.ttt = false
                    } else {
                        this.ttt = true
                    }
                })
                this.$http.post('order/address/findByTbid', {accountId: this.accountId}).then(data => {
                    this.addressList = data
                })
            }
        },
        methods: {
            handleSelect (key, keyPath) {
                console.log(key, keyPath)
            },
            dd1 () {
                this.$router.push('/login')
            },
            output () {
                this.$router.replace('product')
                sessionStorage.clear()
                localStorage.clear()
                this.$router.go(0)
            },
            // 获取图片
            getUrl (picPath) {
                return `http://localhost:8092/product/product/findProductPicByPath?name=` + picPath
            },
            yyy (postWay) {
                if (postWay === '顺丰') {
                    this.order.postFee = 20
                } else if (postWay === '京东专送') {
                    this.order.postFee = 10
                } else {
                    this.order.postFee = 0
                }
                this.order.totalPrice = this.order.postFee + this.order.tbPrdInfoList.price * this.order.payStatus
            },
            pay () {
                this.$confirm('是否确认进行付款操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success'
                }).then(() => {
                    this.order.tbPrdInfoList = []
                    this.order.status = 1
                    this.$http.post('order/order/saveOrUpdate', this.order).then(data => {
                        console.log(data)
                        if (data) {
                            this.$message({
                                type: 'success',
                                message: '购买成功!'
                            })
                            this.reload()// 直接调用刷新方法
                        } else {
                            this.$message({
                                type: 'info',
                                message: '购买失败!'
                            })
                            this.reload()// 直接调用刷新方法
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消付款'
                    })
                })
            },
            shouhuo () {
                this.$confirm('是否确认进行确认收货操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success'
                }).then(() => {
                    this.order.tbPrdInfoList = []
                    this.order.status = 2
                    this.$http.post('order/order/saveOrUpdate', this.order).then(data => {
                        console.log(data)
                        if (data) {
                            this.$message({
                                type: 'success',
                                message: '收货成功!'
                            })
                            this.reload()// 直接调用刷新方法
                        } else {
                            this.$message({
                                type: 'info',
                                message: '收货失败!'
                            })
                            this.reload()// 直接调用刷新方法
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消收货'
                    })
                })
            },
            upd (oid) {
                this.dialogFormVisible = true
                this.$http.post('order/address/findByTbid', {accountId: this.accountId}).then(data => {
                    this.addressList = data
                })
            },
            update (order) {
                this.dialogFormVisible = false
            },
            countTime (afterDate) {
                // 获取当前时间
                let date = new Date()
                let now = date.getTime()
                // 设置截止时间
                let endDate = new Date(afterDate)
                let end = endDate.getTime()
                // 时间差
                let leftTime = end - now
                // 定义变量 d,h,m,s保存倒计时的时间
                if (leftTime >= 0) {
                    this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24)
                    this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
                    this.m = Math.floor(leftTime / 1000 / 60 % 60)
                    this.s = Math.floor(leftTime / 1000 % 60)
                }
                // console.log(this.s)

                if (this.ExitFlag){
                    // 递归每秒调用countTime方法，显示动态时间效果
                    setTimeout(() => {
                        // 你要执行的事件
                        this.countTime(this.order.createBy)
                        if (this.h === 0 && this.s === 0 && this.d === 0 && this.m === 0) {
                            this.$http.post('order/order/saveOrUpdate3', {oid: this.order.oid, status: 4, statu:this.order.status}).then(data => {
                                if (data){
                                    if (this.ExitFlag){
                                        this.$http.post('product/product/addStore', {tid: this.order.tid ,store: this.order.payStatus}).then(res => {
                                            console.log(res)
                                        })
                                        this.reload()// 直接调用刷新方法
                                    }
                                    this.ExitFlag = false;
                                }
                            })
                        }
                    }, 1000)
                }
            },
            open () {
                if (this.h === 0 && this.s === 0 && this.d === 0 && this.m === 0) {
                    this.$message('开始抢购')
                } else {
                    this.$message('还没到开始时间，禁止抢购')
                }
            }
        }
    }

</script>

<style scoped>
    #header
    {
        position: absolute;
        top: 25px;
        bottom: auto;
        left: -5px;
        width: 100%;
        height: 38px;
        overflow: hidden;
    }
    /* Header's buttons. */
    #header > span
    {
        float: right;
        width: 200px;
    }
    #header > span > button
    {
        position: absolute;
    }
    #header > span > span
    {
        padding: 0px 8px 16px 0px;
        line-height: 40px;
    }

    .brandsDiv{
        margin: auto;
        /*border: 1px solid black;*/
    }
    .brands{
        width: 75%;
        height: 50px;
        list-style: none;
        /*border: 1px solid black;*/
        margin: auto;
    }
    .brands li{
        float: left;
        margin: 10px 10px;
    }
</style>
